<template>
  <div :class="['PPzixuDetailsPage',showOrHideCls]">
    <div class="view">
      <div class="conDiv">
        <div class="title">{{srsData.data.title}}</div>
        <div class="ulbtn">
          <div class="smtxt smtxt1">
            <img src="img/zix/1.png" style=" margin-top: -2px;width: 16px;height: 16px;padding-left: 80px;">
            <span>文章来源：{{srsData.data.source}}</span>
          </div>
          <div class="smtxt smtxt2">
            <img src="img/zix/2.png" style=" margin-top: -2px;width: 16px;height: 16px;">
            <span style="padding-right: 150px;">发布日期：{{getTimeStrhandler(srsData.data.ctime)}}</span>
          </div>
          <div class="smtxt smtxt3">
            <div class="smtxt3div" @click="backClick()">
              <img src="img/zix/3.png" style=" margin-top: -2px;width: 12px;height: 11px;">
              <span>返回列表</span>
            </div>

          </div>
        </div>
        <div class="detai" v-html="decodeURIComponent(srsData.data.contents)"></div>
      </div>
    </div>
  </div>
</template>


<style scoped>
.PPzixuDetailsPage{
  position: relative;
}

.view{
  font-size: 14px;margin: auto;line-height: 22px;
  max-width: 1200px;min-width: 1200px;
}
.view div{
  position: relative;
}
.conDiv{
  padding-top: 50px; padding-bottom: 160px;
  font-size: 24px;color: #3E3A39;line-height: 30px;

}
.conDiv .title{
  font-family: Alimama DongFangDaKai;font-weight: 400;font-size: 26px;color: #0B4727;line-height: 30px;
}
.ulbtn{
  display:flex;display: -webkit-flex;flex-direction:row;
  width: 100%;border-bottom: 1px solid #3E3A39;height: 40px;padding-top: 50px;
}

.ulbtn .smtxt{
  width: 33.3%;font-size: 14px;
}
.ulbtn .smtxt1{
  text-align: left;
}
.ulbtn .smtxt2{
  text-align: center;
}
.ulbtn .smtxt3{
  text-align: right;padding: 5px;
}
.ulbtn .smtxt3 .smtxt3div{
  background: #EBECE1;    width: 70px;padding: 5px;float: right;top: -5px;cursor: pointer;
}
.conDiv .detai{
    padding-top:50px;text-align: left;font-size: 14px;line-height: 22px;padding-left: 10px;padding-right: 10px;
}
</style>

<script setup>
/*组件挂载完成后执行的函数；*/
import {ref,reactive,watch,computed,onBeforeUnmount, onMounted, onUnmounted} from "vue";
import { useStore} from 'vuex';
import Enum from "@/js/Enum";
import {useRoute} from "vue-router";

let routerData = useRoute();
let store = useStore();
let srsData=reactive({data:{
  id:Enum.no_num,
  channelId:Enum.no_num,
  title:'',
  contents:'......',
  ctime:0,
  imgUrl:"http://oss-alibaba.shankuishuo.com/shankuishuo/prod/contentimg/d2a2619455160e361c0fb30f074c01a2.png",
  orderNum:0,
  subChannelId:0,
  threeChannelId:0
}});
onMounted(() => {
  console.log("PPzixuDetailsPage onMounted 品牌资讯详情初始化");
  window.scrollTo(0, 0);
  getDataFun();
});


onBeforeUnmount(() => {
  console.log('PPzixuDetailsPage onBeforeUnmount');
})
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  console.log("PPzixuDetailsPage onUnmounted 卸载组件实例后  ");
});
let showOrHideCls=ref('');

let getDataFun=()=>{
  console.log('PPzixuDetailsPage getDataFun',routerData.query.id,routerData.query.channelId);
  $.ajax({
    url: store.state.data_url+'api/getContents',
    type: 'GET',
    dataType: 'json',
    jsonp: "",
    cache: false,
    data: {"contentId":routerData.query.id},
    success: function(data) {
      console.log("PPzixuDetailsPage getContents ",data);
      srsData.data=data.content;
    },
    error: function(xhr, textStatus, errorThrown) {
      console.log("网络错误!");
    }
  });
  //srsData.data=store.state.pinpZXData[i];
}

let backClick=()=>{
  store.state.pinpZxRouterData.url=Enum.zixu_list;
  store.state.pinpZxRouterData.data={rid:routerData.query.id}
  store.state.pinpZxRouterData.status++;
}

let getTimeStrhandler=(str)=>{
  return Util.getTimeStr(str);
}
</script>




